<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    @keyframes move {
      0%{
        transform: translateX(0px);
      }
      100%{
        transform: translateX(1000px);
        background: #993300;
      }
    }
    div{
      width: 200px;
      height: 200px;
      background: #ff8500;
      animation: move;
      animation-duration:3s ;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }
    div:hover{
      animation-play-state: paused;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>
